<!--
 * @Author: shenya
 * @Date: 2023-09-09 15:20:28
 * @Description: 灌水账号点赞
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="800px"
    append-to-body
  >
    <el-row :gutter="20">
      <el-col :span="8">
        <header class="user-header">
          <div style="margin-bottom: 5px">选择分类</div>
          <el-input
            v-model="topicClassifyName"
            placeholder="搜索话题分类"
            clearable
            @input="debouncedSearch"
          />
          <div class="offical-list">
            <div
              v-for="(item, index) in topicClassify"
              :key="item.id"
              :class="{ acitve: activeIndex === index }"
              class="name"
              @click="chooseClassify(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </header>
      </el-col>
      <el-col :span="8">
        <section
          v-loading="tableLoading"
          class="user-wrapper"
        >
          <header class="user-header">
            <div style="margin-bottom: 5px">选择话题</div>
            <el-input
              v-model="topicName"
              placeholder="搜索当前分类话题"
              clearable
              @input="debouncedSearch"
            />
          </header>
          <div class="user-list">
            <el-checkbox-group
              v-if="topicList && topicList.length > 0"
              v-model="checkList"
            >
              <div>
                <li
                  v-for="item in topicList"
                  :key="item.id"
                >
                  <el-checkbox
                    :label="item.name"
                    @change="change($event, item)"
                  >
                    {{ item.name }}
                  </el-checkbox>
                </li>
              </div>
            </el-checkbox-group>
            <el-empty
              v-else
              :image-size="100"
              description="暂无数据"
            ></el-empty>
          </div>
        </section>
      </el-col>
      <el-col :span="8">
        <div>已选话题</div>
        <div class="right-list">
          <div
            v-for="(item, index) in list"
            :key="index"
            class="right-li flex align-items sb"
          >
            <div>{{ item.name }}</div>
            <div>
              <el-button
                class="el-icon-close"
                size="small"
                circle
                @click="del(index)"
              ></el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <template #footer>
      <el-button
        type="primary"
        :loading="loading"
        @click="submit"
      >
        确定
      </el-button>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { useDebounceFn } from '@vueuse/core';
import { selectTopic, selectTopicList } from '@/api/core/topic';
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    labels: {
      type: Array,
      default: [],
    },
    title: {
      type: String,
      default: '灌水账号点赞',
    },
  },
  data() {
    // 防抖搜索企业列表
    const debouncedSearch = useDebounceFn(() => {
      this.getTopicClassify().then(() => {
        this.getTopic();
      });
    }, 1000);
    return {
      debouncedSearch,
      tableLoading: false,
      company: [
        {
          enterpriseId: '1',
          enterpriseName: 'yayaya',
        },
        {
          enterpriseId: '2',
          enterpriseName: 'yuyuyu',
        },
      ],
      checkList: [],
      topicClassifyName: '',
      topicName: '',
      noMore: false,
      loading: false,
      topicList: [],
      topicClassify: [],
      activeIndex: 0,
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    list: {
      get() {
        return this.labels;
      },
      set(val) {
        this.$emit('getTopic', val);
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.getTopicClassify().then(() => {
          this.getTopic();
        });
      }
    },
    topicClassify(val) {
      if (val && val.length) {
        this.getTopic();
      }
    },
    list: {
      deep: true,
      handler(val) {
        this.checkList = val.map((item) => item.name);
      },
    },
  },
  methods: {
    change(event, item) {
      console.log(this.checkList);
      const index = this.list.findIndex((v) => v.id === item.id);
      if (index >= 0) {
        this.list.splice(index, 1);
      } else {
        this.list.push(item);
      }
    },
    //删除
    del(index) {
      this.checkList.splice(index, 1);
      this.list.splice(index, 1);
    },
    //批量点
    submit() {
      if (this.list.length === 0) {
        return this.$message.warning('请选择话题');
      }
      this.$emit('getTopic', this.list);
      this.visible = false;
    },
    chooseClassify(i) {
      this.activeIndex = i;
      this.getTopic();
    },
    getTopicClassify() {
      return new Promise((resolve) => {
        selectTopic({ name: this.topicClassifyName }).then((res) => {
          this.topicClassify = res.data.data;
          this.topicClassify.unshift({ name: '全部', id: '' });
          resolve();
        });
      });
    },
    async getTopic() {
      this.topicList = [];
      if (!this.topicClassify.length) return;
      const id = this.topicClassify[this.activeIndex].id;
      const res = await selectTopicList({
        name: this.topicName,
        classifyId: id,
      });
      this.topicList = res.data.data;
    },
  },
};
</script>
<style lang="scss" scoped>
.offical-list {
  height: 350px;
  overflow: auto;
  margin: 20px 10px 20px 0;
  .name {
    padding: 6px 5px;
    cursor: pointer;
    &:hover {
      background-color: rgba(#66b1ff, 0.5);
    }
    &.acitve {
      background-color: #66b1ff;
    }
  }
}
::v-deep .el-checkbox__label {
  width: 270px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
::v-deep .el-button--small.is-circle {
  padding: 5px !important;
}
.user-wrapper {
  overflow: hidden;
  .search-input {
    width: 300px;
  }
}
.user-list {
  height: 350px;
  overflow: auto;
  margin: 20px 10px 20px 0;
  li {
    padding: 6px 5px;
    cursor: pointer;
    &:hover {
      background-color: #66b1ff;
    }
  }
  .el-checkbox {
    display: flex;
    align-items: center;
  }
  .el-checkbox__label {
    display: block;
    flex: 1;
  }
}
.right-list {
  margin-top: 55px;
  .right-li {
    margin-bottom: 10px;
  }
}
</style>
